<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 让滑块轨道变红 */
      /* input::-webkit-slider-runnable-track {
        background: red;
      } */
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="elem">
      <div slot="username">钟富林</div>
      <div slot="username">6666</div>
    </div>
    <script>
      elem.attachShadow({ mode: 'open' })
      elem.shadowRoot.innerHTML = ` <style> p { color: red;} </style><p>
        <slot name="username">测试</slot>
        </p>`
      //   alert(document.querySelectorAll('p').length)
      //   alert(elem.shadowRoot.querySelectorAll('p').length)
    </script>
  </body>
</html>
